---
title: React
description: React-specifika lintningsregler för Ultracite.
---

React-konfigurationen innehåller React-specifika lintningsregler för JSX, hooks och komponentmönster.

## Installation

Lägg till React-konfigurationen i din `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/react"]
}
```

## Översikt

Denna konfiguration lägger till regler specifika för React-utveckling:

- **JSX-regler**: Handhålla korrekt JSX-syntax och -mönster
- **Hooks-regler**: Säkerställa att React hooks används korrekt
- **Komponentregler**: Handhålla bästa praxis för React-komponenter
- **Hantering av children**: Förhindra felaktig användning av children-propen

## React-specifika regler

### Korrekthet

| Regel | Inställning | Beskrivning |
|------|---------|-------------|
| `noChildrenProp` | `error` | Förhindra att children skickas som prop. Children bör vara nästlade mellan öppningsoch stängningstaggarna. |
| `noNestedComponentDefinitions` | `error` | Förhindra att komponentdefinitioner finns inuti andra komponenter. Detta orsakar onödiga omrenderingar. |
| `noReactPropAssignments` | `error` | Förhindra att props omassigneras i React-komponenter. Props ska behandlas som immutabla. |
| `noRenderReturnValue` | `error` | Förhindra användning av returvärdet från `ReactDOM.render()`. |
| `noVoidElementsWithChildren` | `error` | Förhindra att void-element (som `<img>`, `<br>`) har children. |
| `useExhaustiveDependencies` | `error` | Säkerställ att alla beroenden är korrekt specificerade i React hooks (useEffect, useCallback, useMemo). |
| `useHookAtTopLevel` | `error` | Säkerställ att alla React hooks anropas från topnivån i komponentfunktioner, inte inuti loopar, villkor eller nästlade funktioner. |
| `useJsxKeyInIterable` | `error` | Säkerställ att element i iteratorer har en `key`-prop för Reacts reconciliation. |

### Försöksregler

| Regel | Inställning | Beskrivning |
|------|---------|-------------|
| `noReactForwardRef` | `error` | Förhindra användning av legacy `React.forwardRef`. Använd ref som en prop istället (React 19+). |

### Stil

| Regel | Inställning | Beskrivning |
|------|---------|-------------|
| `useReactFunctionComponents` | `error` | Tvinga användning av funktionskomponenter istället för klasskomponenter i React. |

### Misstänkta

| Regel | Inställning | Beskrivning |
|------|---------|-------------|
| `noArrayIndexKey` | `error` | Förhindra användning av arrayindex som keys. Arrayindex är inte stabila identifierare och kan orsaka problem med komponenttillstånd. |
| `noDuplicateJsxProps` | `error` | Förhindra dubbletter av props i JSX. |
| `noSuspiciousSemicolonInJsx` | `error` | Förhindra semikolon som ändrar semantiken hos JSX-element. |
| `noReactSpecificProps` | `off` | Tillåt React-specifika props som `className` och `htmlFor`. |